/*
* @Author: admin
* @Date:   2017-03-02 12:24:40
* @Last Modified by:   haopeidong
* @Last Modified time: 2017-03-28 16:47:50
*/




 /* show部分开始 */
 	.show {
 		width: 1000px;
 		/* height: 220px; */
 		/* height: 258px; */
 		margin-bottom: 12px;
 	}
	.xmSlide {
		position: relative;
		height: 300px;
		background-color: #fff;
	}

	.xmSlide-pagination {
		z-index: 23;
		position: absolute;
		top: 260px;
		left: 50%;
		text-align: center;
		height: 20px;
	}
	.xmSlide-pagination li {
		display: inline-block;
		width: 12px;
		height: 12px;
		margin: 0 5px;
	}

	.xmSlide-pagination li a {
		display: inline-block;
		width: 12px;
		height: 12px;
		text-indent: -9999px;
		background-color: #ccd1d9;
		border-radius: 8px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		overflow: hidden;
	}

	.xmSlide-pagination li a.active {
		background-color: #656d78;
	}

	.xmSlide-control {
		overflow: hidden;
	}
 	/* .picture {
 		width: 1000px;
 		height: 220px;
 	}
 	.picture img {
 		display: block;
 		width: 1000px;
 		height: 220px;
 	} */
 /* show部分结束 */


 
/* media部分开始 */

	.media {
		height: 716px;
	} 
	.media .media-left .title_all {
		width: 626px;
	}
	.media .media-left .title_all .more {
		width: 70px;
		height: 14px;
		font-size:12px;
		color:#999;
		padding-right: 11px;
	}
	.media .media-left .title_all .more a{
		display: block;
		width: 70px;
		height: 14px;
	}
	.media-left {
		width: 626px;
		height: 716px;
	}
	.media-left-top {
		width: 626px;
		height: 310px;
		margin-bottom: 14px;
	}

	.media-left-top .classify {
		width: 626px;
		height: 70px;
		background-color: #fff;
	}
	.media-left-top .classify ul {
		width: 600px;
		height: 68px;
		margin-left: 15px;
		margin-bottom: 1px;
		border: 1px solid #e8e8e8;
	}
	.media-left-top .classify li {
		width: 115px;
		margin-right: 5px;
		height: 70px;
		float: left;
		font-size: 18px;
		color: #333;
	}
	.active_media {
		background-color: #118def;
		color: #fff;
	}
	.media-left-top .classify li a {
		display: block;
		width: 115px;
		height: 70px;
		text-align: center;
		line-height: 70px;
		font-size: 18px;
	}
	.media-left-top .details {
		width: 626px;
		height: 240px;
		background-color: #fff;
	}
	.media-left-top .details ul {
		width: 600px;
		height: 230px;
		margin-left: 15px;
		margin-top: 5px;
	}

	.media-left-top .details ul li{
		width: 195px;
		height: 110px;
		float: left;
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.media-left-top .details ul li .picture{
		width: 80px;
		height: 80px;
		margin: 15px 5px;
	} 
	.media-left-top .details ul li .picture a{
		display: block;
		width: 80px;
		height: 80px;
	} 
	.media-left-top .details ul li .picture a img{
		display: block;
		width: 80px;
		height: 80px;

	} 
	.media-left-top .details ul li .text{
		width: 100px;
		height: 80px;
		margin: 15px 1px;
	} 
	.media-left-top .details ul li .text .name{
		width: 100px;
		height: 18px;
		margin-bottom: 5px;
		overflow: hidden;
	} 
	.media-left-top .details ul li .text .name a{
		display: block;
		height: 18px;
		color: #000;
		font-size: 16px;
	}
	.media-left-top .details ul li .text .name a:hover{
		color: #118def;
	}  
	.media-left-top .details ul li .text .number{
		width: 100px;
		height: 28px;
		margin-bottom: 5px;
		font-size: 12px;
		color: #999;
	} 
	.media-left-top .details ul li .text .number .fans{
		width: 100px;
		height: 13px;
	}
	.media-left-top .details ul li .text .number .force{
		width: 100px;
		height: 13px;
	}
	.media-left-top .details ul li .text .price{
		width: 100px;
		height: 24px;
	} 
	.media-left-top .details ul li .text .price a{
		display: block;
		width: 85px;
		height: 24px;
		line-height: 24px;
		color: #118def;
		font-size: 12px;
		border-radius: 5px;
	}
	.media-left-top .details ul li .text .price a:hover{
		background-color: #118def;
		color: #fff;
	}    
	.media-left-top .details ul li .text .price a img{
		display: inline-block;
		width: 18px;
		height: 18px;
		margin:  0 5px ;
	}  
	.media-left-bottom {
		/* 同top */
	}
	.media-right {
		width: 360px;
		height: 716px;
	}
	.media-right .notice{
		width: 360px;
		height: 206px;
		background-color: #fff;
		margin-bottom: 10px;
	}
	.media-right .notice .header{
		width: 360px;
		height: 43px;
		font-size: 18px;
		line-height: 43px;
		text-align: center;
		color: #333;
	}
	.media-right .notice .line{
		width: 350px;
		height: 1px;
		background-color: #e8e8e8;
		margin-left: 5px;
	}
	.media-right .notice .body .title{
		width: 350px;
		height: 18px;
		margin: 14px 0 13px 10px;
		font-size: 16px;
		color: #333;
	}
	.media-right .notice .body .content{
		width: 340px;
		height: 80px;
		line-height: 1.5;
		margin: 0 10px 5px;
		font-size: 14px;
		color: #666;
	}
	.media-right .notice .find{
		width: 43px;
		height: 23px;
		float: right;
		margin-right: 10px;
	}
	.media-right .notice .find a{
		display: block;
		width: 43px;
		height: 23px;
		line-height: 23px;
		text-align: center;
		color: #118def;
		border: 1px solid #118def;
		border-radius: 2px;
	}
	.media-right .notice .find a:hover{
		background-color: #118def;
		color: #fff;
	}
	.media-right .lists{
		width: 360px;
		height: 490px;
		background-color: #fff;
	}
	.media-right .lists .header{
		width: 360px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 18px;
		color: #333;
	}
	.media-right .lists .billBorder{
		width: 360px;
		height: 440px;
	}
	.media-right .lists .billBorder ul{
		width: 350px;
		height: 440px;
		margin-left: 5px;
	}
	.media-right .lists .billBorder ul li{
		width: 350px;
		height: 44px;
	}
	.media-right .lists .billBorder ul li:nth-child(2n+1){
		background-color: #f6f6f6;
	}
	.media-right .lists .billBorder ul li .order{
		height: 20px;
		width: 20px;
		text-align: center;
		margin: 12px 40px 0 10px;
		color: #fff;
		border-radius: 50%;
	}
	.media-right .lists .billBorder ul li:nth-child(1) .order{
		background-color: #7ed321;
	}
	.media-right .lists .billBorder ul li:nth-child(2) .order{
		background-color: #f5a623;
	}
	.media-right .lists .billBorder ul li:nth-child(3) .order{
		background-color: #4a90e2;
	}
	.media-right .lists .billBorder ul li:nth-child(n+4) .order{          /* 这里必须n(n>=0)在前面，否则没有效果 */
		height: 18px;
		width: 18px;
		color: #666;
		border: 1px solid #999;
	}
	.media-right .lists .billBorder ul li .logo img{
		display: block;
		width: 27px;
		height: 27px;
		margin-top: 9px;
		margin-right: 12px;
	}
	.media-right .lists .billBorder ul li .name{
		height: 16px;
		width: 120px;
		margin-top: 12px;
		font-size: 14px;
		color: #666;
		/* margin-right: 59px; */
	}
	.media-right .lists .billBorder ul li .number{
		height: 14px;
		margin-top: 12px;
		font-size: 12px;
		color: #666;
	}
	.media-right .lists .billBorder ul li .heart {
		display: block;
		height: 20px;
		width: 50px;
		margin-top:10px;
		margin-right: 20px;
	}
	.heart1 {
		  background: url(../images/web_heart_animation.png);
		  background-position: left;
		  background-repeat: no-repeat;
		  height: 50px;
		  width: 50px;
		  cursor: pointer;
		  /* position: absolute; */
		  left:-14px;
		  background-size:1450px; 
	}
	.heart1:hover{
	  	background-position: right;   /* 显示最后一个红心帧 */
	}
	.heart2 {
		  background: url(../images/web_heart_animation.png);
		  background-position: left;
		  background-repeat: no-repeat;
		  height: 50px;
		  width: 50px;
		  cursor: pointer;
		  /* position: absolute; */
		  left:-14px;
		  background-size:1450px; 
	}
	.heart2:hover{
	  	background-position: right;   /* 显示最后一个红心帧 */
	}
	.heart3 {
		  background: url(../images/web_heart_animation.png);
		  background-position: left;
		  background-repeat: no-repeat;
		  height: 50px;
		  width: 50px;
		  cursor: pointer;
		  /* position: absolute; */
		  left:-14px;
		  background-size:1450px; 
	}
	.heart3:hover{
	  	background-position: right;   /* 显示最后一个红心帧 */
	}
	.heart4 {
		  background: url(../images/web_heart_animation.png);
		  background-position: left;
		  background-repeat: no-repeat;
		  height: 50px;
		  width: 50px;
		  cursor: pointer;
		  /* position: absolute; */
		  left:-14px;
		  background-size:1450px; 
	}
	.heart4:hover{
	  	background-position: right;   /* 显示最后一个红心帧 */
	}
	.heart5 {
		  background: url(../images/web_heart_animation.png);
		  background-position: left;
		  background-repeat: no-repeat;
		  height: 50px;
		  width: 50px;
		  cursor: pointer;
		  /* position: absolute; */
		  left:-14px;
		  background-size:1450px; 
	}
	.heart5:hover{
	  	background-position: right;   /* 显示最后一个红心帧 */
	}
	.heart6 {
		  background: url(../images/web_heart_animation.png);
		  background-position: left;
		  background-repeat: no-repeat;
		  height: 50px;
		  width: 50px;
		  cursor: pointer;
		  /* position: absolute; */
		  left:-14px;
		  background-size:1450px; 
	}
	.heart6:hover{
	  	background-position: right;   /* 显示最后一个红心帧 */
	}
	.heart7 {
		  background: url(../images/web_heart_animation.png);
		  background-position: left;
		  background-repeat: no-repeat;
		  height: 50px;
		  width: 50px;
		  cursor: pointer;
		  /* position: absolute; */
		  left:-14px;
		  background-size:1450px; 
	}
	.heart7:hover{
	  	background-position: right;   /* 显示最后一个红心帧 */
	}
	.heart8 {
		  background: url(../images/web_heart_animation.png);
		  background-position: left;
		  background-repeat: no-repeat;
		  height: 50px;
		  width: 50px;
		  cursor: pointer;
		  /* position: absolute; */
		  left:-14px;
		  background-size:1450px; 
	}
	.heart8:hover{
	  	background-position: right;   /* 显示最后一个红心帧 */
	}
	.heart9 {
		  background: url(../images/web_heart_animation.png);
		  background-position: left;
		  background-repeat: no-repeat;
		  height: 50px;
		  width: 50px;
		  cursor: pointer;
		  /* position: absolute; */
		  left:-14px;
		  background-size:1450px; 
	}
	.heart9:hover{
	  	background-position: right;   /* 显示最后一个红心帧 */
	}
	.heart10 {
		  background: url(../images/web_heart_animation.png);
		  background-position: left;
		  background-repeat: no-repeat;
		  height: 50px;
		  width: 50px;
		  cursor: pointer;
		  /* position: absolute; */
		  left:-14px;
		  background-size:1450px; 
	}
	.heart10:hover{
	  	background-position: right;   /* 显示最后一个红心帧 */
	}
	.likeCount{
		  margin-top: 13px;
		  margin-left: 28px;
		  font-size: 16px;
		  color: #999999;
	}  
	@-webkit-keyframes heartBlast {
		  0% {background-position: left;}
		  100% {background-position: right;}
	}

	@keyframes heartBlast {
		  0% {background-position: left;}
		  100% {background-position: right;}
	}

	.heartAnimation {
		  -webkit-animation-name: heartBlast; //webkit内核浏览器
		  animation-name: heartBlast;
		  -webkit-animation-duration: .8s;
		  animation-duration: .8s;
		  -webkit-animation-iteration-count: 1;
		  animation-iteration-count: 1;
		  -webkit-animation-timing-function: steps(28); //共28个背景图片帧
		  animation-timing-function: steps(28);
		  background-position: right;
	}
/* media部分结束 */



/* case部分开始 */
	.case {
		width: 1000px;
		height: 890px;
		margin-top: 10px;
		margin-bottom: 20px;
		background-color: #fff;
	}
	.case .content {
		width: 970px;
		height: 788px;
		margin-left: 15px;
		border-top: 2px solid #118def;
	}
	.case .content li{
		float: left;
		width: 475px;
		margin-right: 10px;
		height: 385px;
		margin-bottom: 9px;
		/* background-color: pink; */
	}
	.case .content li .case-left{
		width: 200px;
		height: 356px;
		margin-right: 17px;
		margin-top: 17px;
	}
	.case .content li .case-left img{
		display: block;
		width: 200px;
		height: 356px;
	}
	.case .content li .case-right{
		width: 235px;
		height: 356px;
		margin-top: 17px;
	}
	.case .content li .case-right .header{
		width: 235px;
		height: 60px;		
	}
	.case .content li .case-right .header .logo img{
		width: 60px;
		height: 60px;		
	}
	.case .content li .case-right .header .title{
		width: 150px;
		height: 60px;	
		margin-left: 10px;	
		margin-top: 10px;
		font-size: 26px;
		color: #000;
	}
	.case .content li .case-right .substance{
		width: 233px;
		height: 200px;
		margin-top: 20px;
		line-height: 1.5;
		color: #333;
		font-size: 14px;
	}
	.case .content li .case-right .substance span{
		color: #666;
	}
	.case .content li .case-right .substance .one{
		margin-bottom: 10px;
	}
	.case .content li .case-right .substance .two{
		margin-bottom: 10px;
	}
	.case .content li .case-right .details a{
		display: block;
		width: 110px;
		height: 44px;
		border: 1px solid #118def;
		color: #118def;
		font-size: 16px;
		line-height: 44px;
		text-align: center;
		margin-top: 20px;
		border-radius: 3px;
	}
	.case .content li .case-right .details a:hover{
		background: #118def;
		color: #fff;
	}
/* case部分结束 */



 /* custom部分开始 */
 	.custom {
 		width: 1000px;
 		height: 240px;
 		background-color: #fff;
 	}
 	.custom .website {
		margin-left: 14px;
		
 	}
 	.custom .website li {
 		float: left;
		margin-right: 6px;
		margin-bottom: 9px;
		position: relative;
 	}
 	.custom .website li img {
 		width: 156px;
 		height: 72px;
 	}
 	.custom .website li span {
 		display: inline-block;
 		width: 156px;
 		height: 30px;
 		line-height: 30px;
 		text-align: center;
 		background-color: #ccc;
 		color: #fff;
 		position: absolute;
 		bottom: 0;
 		left: 0;
 		display: none;
 	}
 /* custom部分结束 */


